<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*盒子模型
           盒子模型种类：1.内容盒子 标准盒子 w3x盒子
           盒子宽156px 内容区宽100px + 左右内边框50px + 左右边框6px
           盒子高165px
           盒子所占页面宽192px
           盒子所占页面高234px
        */
        div{
            /* 设置盒模型 默认所有块级元素都是内容盒子 */
        box-sizing: content-box;    
        width: 100px;
        height: 100px;
        /* 渐变背景色 线性渐变 */
        background-image:linear-gradient(red,yellow,pink);
        margin: 23px 17px 46px 19px;
        padding: 15px 27px 44px 23px;
        border: 3px solid red;
    }
    </style>
    
</head>
<body>
    <div>块级元素</div>
</body>
</html>